<template>
    <common-dialog :title="title" :base-dialog="roleDialog">
        <div slot="body">

            <el-form :model="editData" :rules="rules" ref="editData" size="mini" label-width="80px" slot="body">

                <el-form-item label="登录帐号" prop="username">
                    <el-input v-model="editData.username" :disabled="editData.username?true:false" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="代理人编号" prop="code">
                    <el-input v-model="editData.code" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="代理人名称" prop="name">
                    <el-input v-model="editData.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phonenum">
                    <el-input v-model="editData.phonenum" :maxlength="11" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="证件类型" prop="idtype">
                    <el-select placeholder="" v-model="editData.idtype">
                        <el-option label="身份证" value="0"></el-option>
                        <el-option label="营业执照" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="证件号码" prop="idnum">
                    <el-input v-model="editData.idnum" :maxlength="11" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="证件照片" prop="idpic">
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"  :on-success="handleAvatarSuccess" >
                        <img v-if="idpic" :src="idpic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                </el-form-item>

                <el-form-item label="银行名称" prop="bankname">
                    <el-input v-model="editData.bankname" :maxlength="11" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="银行卡号" prop="banknum">
                    <el-input v-model="editData.banknum" :maxlength="11" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="" style="width:400px;">
                    <el-button type="primary" @click="addAndEditMenu('editData')">确定</el-button>
                    <el-button type="primary" @click="cancelDialog('editData')">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </common-dialog>
</template>

<<script>
import commonDialog from "@/components/Common/CommonDialog";
import { mapGetters } from "vuex";
export default {
    props:{
        roleDialog:{
            type:Boolean,
            default:false
        },
        title:{
            type:String,
            default:''
        },
        editData:{
            type:Object,
            default:{}
        }
    },
  data(){
      
      return{
        idpic:'',
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        username: [{ required: true, message: "请输入登录帐号", trigger: "blur" }],
        phonenum: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,
            message: "请输入合法的手机号码",
            trigger: "blur"
          }
        ],
        idpic: [{ required: true, message: "请上传证件照片", trigger: "blur" }],
         code: [{ required: true, message: "请输入代理人编号", trigger: "blur" }],
          name: [{ required: true, message: "请输入代理人名称", trigger: "blur" }],
          idtype: [{ required: true, message: "请选择证件类型", trigger: "blur" }],
          idnum:[{ required: true, message: "请输入证件号码", trigger: "blur" }],
          bankname:[{ required: true, message: "请输入银行名称", trigger: "blur" }],
          banknum:[{ required: true, message: "请输入银行卡号", trigger: "blur" }],
      }
      }
  },

   components: {
    commonDialog
  },
  methods:{
     cancelDialog(formName) {
     this.$emit('cancelAndClick',{bool:false,isSearch:true})
     this.$refs[formName].resetFields();
    },
    addAndEditMenu(formName){
    this.$refs[formName].validate(valide => {
        if (valide) {
        let params= Object.assign({},this.editData,{idpic:this.idpic});
          this.$emit('addAndClick',params,formName)
        }
      });
    },
    handleAvatarSuccess(res, file){
        this.idpic=res.idpic
    }

  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
